
<template>
  <div class="Main">
    <div class="MainTitle">采购业务列表</div>
    <div class="MianContent">
      <div class="MainTopAction">
        <div class="flex align-center">
          <a-button
            style="margin-right: 10px"
            icon="plus"
            type="primary"
            @click="addBrand"
            >新增采购业务</a-button
          >
          <!-- <a-select
              v-model="type"
              placeholder="选择类型查找"
              allowClear
              style="width: 220px"
              @change="selectType"
            >
              <a-select-option :value="1"> 体格 </a-select-option>
              <a-select-option :value="2"> 能力 </a-select-option>
              <a-select-option :value="3"> 气质 </a-select-option>
            </a-select> -->
        </div>
        <div class="flex align-center">
          <a-input
            v-model="keyword"
            allowClear
            @change="InputChange"
            style="width: 300px"
            placeholder="请输入信息查询"
          />
          <a-button class="ml-10" type="primary" @click="SeachKeyword"
            >搜索</a-button
          >
        </div>
      </div>
      <div class="TableView">
          <!-- :scroll="{ x: 1600, y: '' }" -->
        <a-table
          :columns="listfields"
          :data-source="listData"
          bordered
          size="middle"
          :pagination="false"
        >
          <div slot="indexNum" slot-scope="row, index">
            {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
          </div>
          <div slot="action" slot-scope="row, index">
            <!-- <a-button type="primary" size="small" @click="GoOrderDetail(index)">上架</a-button> -->
            <a-button
              style="margin: 0 10px 0 0"
              type="primary"
              size="small"
              @click="EditBrand(index)"
              >编辑</a-button
            >
            <a-button
              style="margin: 0 10px 0 0"
              type="primary"
              size="small"
              @click="toDetail(index)"
              >详情</a-button
            >
            <a-popconfirm
              placement="bottom"
              ok-text="删除"
              cancel-text="取消"
              @confirm="DeleteItem(index)"
            >
              <template slot="title">
                <p>警告</p>
                <p>此操作将删除该采购业务, 是否继续?</p>
              </template>
              <a-button type="danger" size="small">删除</a-button>
            </a-popconfirm>
            <!-- <a-button style="margin:0 0px 0 10px;" type="info" size="small" @click="BrandStatus(index)">{{index.status?'下架':'上架'}}</a-button> -->
          </div>
          <!-- <div slot="type" slot-scope="row, index">
            {{ row == 1 ? "体格" : row == 2 ? '能力' : row == 3 ? '气质' : "" }}
          </div> -->
        </a-table>
        <Pagination
          :total="total"
          v-model="pageno"
          :pageSize.sync="pagesize"
          @change="handlePageChange"
          @onShowSizeChange="onShowSizeChange"
        ></Pagination>
      </div>
    </div>
    <a-modal
      :title="ModalTitle"
      v-if="visible"
      v-model="visible"
      :width="620"
      :centered="true"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div style="padding-left: 10px">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item ref="type" label="类型" prop="type">
            <a-select
              v-model="form.type"
              placeholder="请选择类型"
              allowClear
              style="width: 220px"
            >
              <a-select-option :value="1"> 体格 </a-select-option>
              <a-select-option :value="2"> 能力 </a-select-option>
              <a-select-option :value="3"> 气质 </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item ref="grade" label="等级" prop="grade">
            <a-input
              v-model="form.grade"
              placeholder="请输入等级"
              allowClear
            />
          </a-form-model-item>
          <a-form-model-item ref="score_min" label="最小值" prop="score_min">
            <a-input
              v-model="form.score_min"
              placeholder="请输入最小值"
              allowClear
              type="number"
              min="0"
            />
          </a-form-model-item>
          <a-form-model-item ref="score_max" label="最大值" prop="score_max">
            <a-input
              v-model="form.score_max"
              placeholder="请输入最大值"
              allowClear
              type="number"
              min="0"
            />
          </a-form-model-item>
        </a-form-model>
      </div>
      <!-- <template slot="footer">
        <div>
          <a-button size="small" @click="handleCancel">取消</a-button>
          <a-button
            type="primary"
            size="small"
            @click="handleOk"
            :loading="creatLoading"
            >确定</a-button
          >
        </div>
      </template> -->
    </a-modal>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import { HospitalProcureIndex } from "@/views/Columns/HospitalProcure";
import {
  HospitalPurchaseOrder,
  HospitalPurchaseOrderDelete
} from "@/api/api.js";
import env from "@/config/env";
import request from "@/utils/request";
import Vue from "vue";

export default {
  name: "list",
  components: {
    Pagination,
  },
  data() {
    return {
      total: 0, //定义初始有多少条数据
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      keyword: "",
      OrderStatus: "",
      listfields: HospitalProcureIndex, //表头列表
      listData: [], //表格数据
      cate: undefined, //进食阶段
      allergy: undefined, //辅食类型

      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      visible: false,
      ModalTitle: "新增等级",
      form: {
        type: undefined,
        grade: "",
        score_min: "",
        score_max: "",
      },
      type:undefined,
      rules: {
        type: [{ required: true, message: "请选择类型!", trigger: "blur" }],
        grade: [
          { required: true, message: "请输入等级!", trigger: "blur" },
        ],
        score_min: [
          { required: true, message: "请输入最小值!", trigger: "blur" },
        ],
        score_max: [
          { required: true, message: "请输入最大值!", trigger: "blur" },
        ],
        
      },
      brandId: null, //数据源id
    //   creatLoading: false,
    };
  },
  computed: {
    ...mapState({}),
  },
  created() {},
  mounted() {
    let that = this;
    that.GetList();
  },
  methods: {
    ...mapActions({}),

    // 上下架
    async BrandStatus(row) {
      const that = this;
      let params = {
        id: row.ID,
        status: row.status ? false : true,
      };
      let res = await BrandStatus(params);
      if (res.data.code == 0) {
        showSuccess("操作成功！");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    // 删除按钮
    async DeleteItem(row) {
      const that = this;
      let params = {
        id:row.id
      }
      let res = await HospitalPurchaseOrderDelete(params);
      if (res.data.code == 1) {
        showSuccess("删除成功！");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    // 新增按钮
    addBrand() {
      const that = this;
    //   that.brandId = null;
    //   that.ModalTitle = "新增等级";
    //   that.visible = true;
        that.$router.push({name:'HospitalProcureAdd',query:{}})
    },
    // 编辑按钮
    EditBrand(row) {
      const that = this;
      console.log(row,'选中的项')
      that.$router.push({name:'HospitalProcureAdd',query:{itemId:row.id}})
    },

    // 详情按钮
    toDetail(row){
      const that = this;
      that.$router.push({name:'HospitalProcureDetail',query:{itemId:row.id}})
    },

    // 获取详情
    async GradeView(){
        const that = this
        let res = await GradeView({id:that.brandId})
    },

    // 弹窗取消关闭
    handleCancel() {
      const that = this;
      that.$refs.ruleForm.resetFields();
      that.form.type = undefined;
      that.form.grade = "";
      that.form.score_min = "";
      that.form.score_max = "";
      that.visible = false;
    },
    // 弹窗确认按钮
    handleOk() {
      const that = this;
    //   that.creatLoading = true;
      that.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          let params = {
            type:that.form.type,
            grade:that.form.grade,
            score_min:that.form.score_min,
            score_max:that.form.score_max,
          };
          let res;
          if (that.brandId) {
            //编辑
            params.id = that.brandId;
            res = await GradeEdit(params);
          } else {
            // 新增
            res = await GradeAdd(params);
          }
          if (res.data.code == 1) {
            showSuccess(that.brandId ? "编辑成功" : "添加成功");
            // that.visible = false;
            that.handleCancel();
            that.GetList();
          } else {
            showError(res.data.msg);
          }
        } else {
        //   that.creatLoading = false;
        }
      });
    },

    // 选择type获取列表
    selectType(){
      const that = this;
      that.GetList()
    },

    InputChange(e) {
      let that = this;
      if (e.target.value == "") {
        that.GetList();
      }
    },
    SeachKeyword() {
      let that = this;
      that.GetList();
    },
    GoOrderDetail(row) {
      this.$router.push({
        name: "OrderInfo",
        query: { id: row.id, back: "OrderList" },
      });
    },
    // 获取数据列表API
    async GetList() {
      let that = this;
      let params = {
        keywords: that.keyword,
        page: that.pageno,
        pageSize: that.pagesize,
      };
      const res = await HospitalPurchaseOrder(params);
      if (res.data.code == 1) {
        // console.log(res.data);
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.key = item.id;
            item.indexNum = index;
            // item.CreatedAt = new Date(item.CreatedAt).toLocaleString(); //地区时间转换
            item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss'); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.total = data.count;
        that.listData = data.list;
      } else {
        showError(res.data.msg);
      }
    },

    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      let that = this;
      that.pageno = pageno;
      that.pagesize = pagesize;
      that.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      let that = this;
      //pagesize 变化的回调
      that.pageno = current;
      that.pagesize = size;
      that.GetList(); //这个是向后台请求的数据函数
    },
  },
};
</script>

<style lang="less">
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(221, 169, 85, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .TabsItem {
      padding: 10px 0;
      width: 70px;
      position: relative;
      margin-right: 24px;
      text-align: center;
      cursor: pointer;
      margin-bottom: 20px;
      color: #000;
    }

    .TabsIndex {
      color: #dda955;
    }

    .TabsIndex::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 50px;
      height: 2px;
      background-color: #dda955;
    }
  }
}
</style>